import React from 'react';
import base64url from "base64url";
import { connect } from 'dva'
import { routerRedux } from 'dva/router';
import { Icon, List, WhiteSpace, Flex, NoticeBar,Progress,Picker} from 'antd-mobile';
import Rank from './../../Mine/rankListIteam/ranklistPerson'
import { createForm } from 'rc-form';
import JcEcharts from '../../../components/JcEcharts/index';
import styles from './dfadminister.less'

let thisDate = new Date();
var Month = thisDate.getMonth()+1;
const time = [
  {label:"1月",value:"1月"},
  {label:"2月",value:"2月"},
  {label:"3月",value:"3月"},
  {label:"4月",value:"4月"},
];

console.log("time"+Month);
class dfadminister extends React.Component{

  constructor(props){
    super(props);
    this.state={
      percent: 90,
      percent1: 95,
      percent2: 97,
      percent3: 100,
      percent4: 59,
      time:[Month+"月"],

    }
  }
  render(){
    const orgList = [];
    const orgData = this.props.list;
    for (let key in orgData) {
      orgList.push(orgData[key])
    }
    const Item = List.Item;
    const Brief = Item.Brief;
    const { percent,percent1,percent2,percent3,percent4 } = this.state;
    let transferType={
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
      },
      legend: {
        orient: 'vertical',
        x: 'left',
      },

      series: [
        {
          name:'访问来源',
          type:'pie',
          radius: ['30%', '50%'],
          avoidLabelOverlap: false,
          hoverAnimation:false,
          silent:true,
          label: {
            normal: {
              show: true,
              position: 'center',
              formatter:function(){
                return'97%'
              },
              textStyle:{
                fontSize:30,
                color:'white'
              }
            },
            emphasis: {
              show: true,
              textStyle: {
                fontSize: '30',
                fontWeight: 'bold'
              }
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data:[
            {value:335, name:'97%',
              itemStyle:{
                normal:{color:'white'}
              }
            },
            {value:50,
              itemStyle:{
                normal:{color:'#FF6865'}
              }
            },
          ]
        }
      ]
    };
    return(
      <div>
        <div className={styles.bg}>
          <div style={{float:'left',width:'50%'}}>
            <div  className="colorRed">
              <Picker
                style={{color:"#fff"}}
                data={[time]}
                title="时间"
                cascade={false}
                extra="2018年1月"
                value={this.state.time}
                onChange={v => this.setState({time: v})}
                onOk={v => console.log(v)}

              >
                <List.Item arrow="horizontal">党费</List.Item>
              </Picker>
            </div>
            <p style={{marginTop:'0.54rem'}}>￥<span style={{fontSize:'0.5rem'}}>52,345.</span>00<br/> <span>交纳总数</span></p>
          </div>
          <div style={{height:'3rem',float:'left',width:'50%'}}>
            <JcEcharts type="pie" data={transferType}/>
          </div>
          <hr style={{width:'91%'}} className="df-Hr"/>
          <div style={{width:'100%',marginTop:'0.2rem',marginLeft:'-3%'}}>
            <div style={{width:'45%',display: 'inline-block'}}><Icon style={{verticalAlign:'middle'}} type={require('../../../svgs/work/nan.svg')} /><span style={{verticalAlign:'middle',fontSize:'87%'}}>应交总额：282,345</span></div>&nbsp;|
            <div style={{width:'45%',display: 'inline-block',marginLeft:'2%'}}><Icon style={{verticalAlign:'middle'}} type={require('../../../svgs/work/nv.svg')} /><span style={{verticalAlign:'middle',fontSize:'87%'}}>今日交纳：203,234</span></div>
          </div>
        </div>
        <WhiteSpace/>
        <NoticeBar icon={<Icon type={require('../../../svgs/work/qd.svg')}/>} action={<span style={{ color: '#a1a1a1' }}>10秒前</span>}>
          &nbsp;&nbsp;&nbsp;&nbsp;郑成功&nbsp;&nbsp;成功交纳128.00元党费
        </NoticeBar>
        <WhiteSpace/>
        <div>
          {this.props.list&&
          <List className="my-list">
            {
              orgList.map((it) => {
                return <Item extra={<div>
                <div className="show-info">
                  <Progress percent={percent} position="normal"/>
                 <span aria-hidden="true" className={styles.itemspan}>{percent}%</span>
              </div>
            </div>}>
                  {it.name.substring(0,12)+"..."}
                  <p className={styles.numbers}>
              <span>应缴人数：368</span>
              <span>实交人数：357</span>
                  </p>
            </Item>
              })
            }
          </List>
          }
        </div>
      </div>
    )
  }
}
function mapStateToProps({organizationss}) {
  console.log("orgLists",organizationss);
    return {
      list: organizationss.orgLists
    }
}
export default connect(mapStateToProps)(dfadminister);
